import * as React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  useColorScheme,
  StatusBar,
} from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {
  NavigationContainer,
} from '@react-navigation/native';
import FlashMessage from 'react-native-flash-message';

import HomePage from '../pages/HomePage';
import SetPage from '../pages/SetPage';
import AboutPage from '../pages/AboutPage';
import AboutUsPage from '../pages/AboutUsPage';
import AboutMyPage from '../pages/AboutMyPage';
import Bluetest from '../pages/Bluetest';

const StackHome = createStackNavigator();

function homeStack() {

  return (
    <StackHome.Navigator
      screenOptions={{
        title: '',
        headerStyle: {
          backgroundColor: '#FFF',
          shadowOffset: { width: 0, height: 0 },
        },
        headerTintColor: '#060606',
        headerTitleStyle: {
          fontWeight: 'bold',
          alignSelf: 'center',
          // 标题居中 flex:1, textAlign: 'center'
        },
        headerTitleAlign: 'center',
      }}>
      <StackHome.Screen
        name="HomePage"
        component={HomePage}
        options={{ headerStyle: { backgroundColor: 'transparent' }, headerTransparent: true }}
      />
      <StackHome.Screen name="Bluetest" component={Bluetest} />
    </StackHome.Navigator>
  );
}

function setStack() {
  return (
    <StackHome.Navigator
      screenOptions={{
        title: '',
        // headerStyle: platformContainerStyles,
        headerStyle: {
          backgroundColor: '#FFF',
          shadowOffset: { width: 0, height: 0 },
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
          alignSelf: 'center',
        },
        // headerTransparent: false
        headerTitleAlign: 'center',
      }}>
      <StackHome.Screen name="SetPage" component={SetPage} options={{ headerStyle: { backgroundColor: 'transparent' }, headerTransparent: true }} />
      <StackHome.Screen name="Bluetest" component={Bluetest} />
    </StackHome.Navigator>
  );
}

function aboutStack() {
  return (
    <StackHome.Navigator
      screenOptions={{
        title: '',
        headerStyle: {
          backgroundColor: '#fff',
          shadowOffset: { width: 0, height: 0 },
        },
        headerTintColor: '#000',
        headerTitleStyle: {
          fontWeight: 'bold',
          alignSelf: 'center',
        },
        headerTitleAlign: 'center',
      }}>
      <StackHome.Screen name="AboutPage" component={AboutPage} options={{ headerStyle: { backgroundColor: 'transparent' }, headerTransparent: true }} />
      {/* <StackHome.Screen name="AboutUsPage" component={AboutUsPage} options={{ headerStyle: { backgroundColor: 'transparent' }, headerTransparent: true }} /> */}
    </StackHome.Navigator>
  );
}

function HomeTabs() {
  return (
    <Tab.Navigator tabBarOptions={{ showLabel: false }}>
      <Tab.Screen
        name="Home"
        component={homeStack}
        options={{
          tabBarIcon: ({ focused, color, size }) => (
            <View style={{ alignItems: 'center' }}>
              {focused ? <View style={{ width: 80, height: 14, backgroundColor: '#CFFF36', position: 'absolute', bottom: 0 }} /> : null}
              <Image
                source={focused ? require('../images/icon_tab0s.png') : require('../images/icon_tab0n.png')}
                style={{ width: 40, height: 32 }} />
            </View>

          ),
        }}
      />
      <Tab.Screen name="Setting" component={setStack} options={{
        tabBarIcon: ({ focused, color, size }) => (
          <View style={{ alignItems: 'center' }}>
            {focused ? <View style={{ width: 80, height: 14, backgroundColor: '#CFFF36', position: 'absolute', bottom: 0 }} /> : null}
            <Image
              source={focused ? require('../images/icon_tab1s.png') : require('../images/icon_tab1n.png')}
              style={{ width: 40, height: 32 }} />
          </View>

        ),
      }} />
      <Tab.Screen name="About" component={aboutStack} options={{
        tabBarIcon: ({ focused, color, size }) => (
          <View style={{ alignItems: 'center' }}>
            {focused ? <View style={{ width: 80, height: 14, backgroundColor: '#CFFF36', position: 'absolute', bottom: 0 }} /> : null}
            <Image
              source={focused ? require('../images/icon_tab2s.png') : require('../images/icon_tab2n.png')}
              style={{ width: 40, height: 32 }} />
          </View>

        ),
      }} />
    </Tab.Navigator>
  )
}

const Tab = createBottomTabNavigator();

function NavigationComponent() {
  /*
    NOTE:
    单个页面props  options
    多个页面props  screenOptions
    传参          navigation.navigate('Page', { itemId: 86 })
    取参          const { itemId } = route.params;
    */
  return (
    <NavigationContainer>
      <StackHome.Navigator screenOptions={{
        headerShown: false
      }}>
        <StackHome.Screen name="Home" component={HomeTabs} />
        {/* {setStack}
        {aboutStack} */}
        {/* <StackHome.Screen name="AboutUsPage" component={AboutUsPage} options={{
          headerShown: true, headerStyle: { backgroundColor: 'transparent' }, headerTransparent: true, headerTitleStyle: {
            fontWeight: 'bold',
            fontFamily: 'Moldiv'
          }
        }} /> */}

        <StackHome.Screen name="AboutMyPage" component={AboutMyPage} options={{
          headerShown: true, headerStyle: { backgroundColor: 'transparent' }, headerTransparent: true, headerTitleStyle: {
            fontWeight: 'bold',
            fontFamily: 'Moldiv'
          }
        }} />
        <StackHome.Screen name="AboutUsPage" component={AboutUsPage} options={{
          headerShown: true, headerStyle: { backgroundColor: 'transparent' }, headerTransparent: true, headerTitleStyle: {
            fontWeight: 'bold',
            fontFamily: 'Moldiv'
          }
        }} />
        {/* <Stack.Screen name="Settings" component={Settings} /> */}
      </StackHome.Navigator>
      <FlashMessage position="top" />
    </NavigationContainer>
  );
}

export default NavigationComponent;
